<template>
    <el-container>
        <el-card style="width: 100%; margin: 10px">
            <el-descriptions title="概念介绍" :column="1">
                <el-descriptions-item label="实例标签">
                    实例标签即应用服务实例上的元数据，例如：version: 1.0
                </el-descriptions-item>
                <el-descriptions-item label="流量染色">
                    将请求赋予目标环境实例的标签，使其能正确访问到指定的目标环境中实例或实例集群（该集群内的实例具有相同的标签）
                </el-descriptions-item>
            </el-descriptions>

            <h4 class="desc-title">示意图</h4>
            <img src="@/assets/images/dyeing.png" width="1000" height="520" style="overflow:hidden"/>

            <h4 class="desc-title">网关流量染色</h4>
            <h5 class="desc-item-title">1.实例打标</h5>
            <div style="font-size: 12px;">
                <p>根据需求给应用实例打上指定标签，支持以下两种方式打标：</p>
                <p>1.直接在配置文件中配置元数据标签 </p>
                <div >
                    <img src="@/assets/images/metadata01.png" width="500" height="200" style="overflow:hidden"/>
                </div>
                <p>2.在启动参数中添加元数据标签</p>
                <div >
                    <img src="@/assets/images/metadata02.png" width="360" height="60" style="overflow:hidden"/>
                </div>
            </div>
            <h5 class="desc-item-title">2.部署实例</h5>
            <div style="font-size: 12px;">
                <p>将打完标的实例部署到服务器</p>
            </div>
            <h5 class="desc-item-title">3.配置规则</h5>
            <div style="font-size: 12px;">
                <p>在服务端路由规则中指定的规则中配置好规则子项</p>
                <div >
                    <img src="@/assets/images/route-rule.png" width="1000" height="200" style="overflow:hidden"/>
                </div>
            </div>
        </el-card>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            metadata: ''
        }
    }
}
</script>

<style>

</style>